<template>
  <component
    ref="form"
    :readonly="readonly"
    :is="showComponents"
    :mode="mode"
    v-model="_value"
    :options-config="config.optionsConfig"
    :form-item="config"
    v-bind="config.props"
  />
</template>
<script setup>
import { computed } from "vue";
import TextInput from "./funcComponents/TextInput.vue";
import TextareaInput from "./funcComponents/TextareaInput.vue";
import SelectInput from "./funcComponents/SelectInput.vue";
import MultipleSelect from "./funcComponents/MultipleSelect.vue";
import DateTime from "./funcComponents/DateTime.vue";
import FileUpload from "./funcComponents/FileUpload.vue";

const props = defineProps({
  optionsConfig: {
    type: Object,
    default: () => ({})
  },
  config: {
    type: Object,
    default: () => {
      return {};
    }
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  readonly: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);

const showComponents = computed(() => {
  const cmps = {
    TextInput: TextInput,
    TextareaInput: TextareaInput,
    SelectInput: SelectInput,
    MultipleSelect: MultipleSelect,
    DateTime: DateTime,
    FileUpload: FileUpload
  };
  return cmps[props.config.name];
});
const _value = computed({
  get: () => {
    return props.modelValue;
  },
  set: val => {
    emit("update:modelValue", val);
  }
});
</script>

<style lang="scss" scoped></style>
